<template>
  <div class="problem-box">
    <div class="problem-section">
      <div class="problem-Iocn"/>
      <div class="problem-text">{{content}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Problem",
  props:{
    content:{
      type:String,
      default:"暂无数据"
    }
  },
  data() {
    return {};
  },
  // props: ["isShowProblem"],
};
</script>

<style lang="scss">
.problem-box {
  width: 100%;
  background: #fff;
  padding: 32px 0;

  [data-theme="night"] & {
    background: #141414;
  }
}

.problem-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.problem-Iocn {
  width: 150px;
  height: 150px;
  background: url(../assets/images/problem.png) 0 0 no-repeat;
  background-size: 100% 100%;

  [data-theme="night"] & {
    //background: url(../../assets/problem_night.png) 0 0 no-repeat;
    background-size: 100% 100%;
  }
}

.problem-text {
  text-align: center;
  color: #a5a6ad;
  font-size: 14px;
  margin-top: 12px;

  [data-elder="old"] & {
    font-size: 36px;
  }

  [data-theme="night"] & {
    color: #a0a1a1;
  }
}

</style>
